<template>
  <div class="blog-admin-container">
    <card-panel :card-panel-data="cardPanelData" />
    <lin-chart
      class="custom-margin-bottom"
      :time-axis="week_visits.time_axis"
      :line-data="week_visits.line_data"
    />
    <heatmap-chart
      class="custom-margin-bottom"
      :end-date="articles_commit.end_date"
      :heatmap-data="articles_commit.data"
    />
    <el-row class="custom-margin-bottom" type="flex" justify="space-between" :gutter="32">
      <el-col :span="16">
        <barchart :article-axis="articles_visit_ranking.articles_name" :bar-data="articles_visit_ranking.visits_count" />
      </el-col>
      <el-col :span="8">
        <pie-chart
          :pie-data="category_data"
        />
      </el-col>
    </el-row>

    <el-row :gutter="32">
      <el-col :span="8">
        <word-cloud-chart
          :word-cloud-data="word_cloud"
        />
      </el-col>
      <el-col :span="8">
        <tag-cloud-chart :tag-d-t-o-list="tags_name" />
      </el-col>
      <el-col :span="8">
        <pie-chart
          pie-title="文章标签统计"
          pie-id="tag-pie-chart"
          :pie-data="tags_data"
        />
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'

import CardPanel from '@/views/dashboard/childComps/CardPanel'
import LinChart from '@/views/dashboard/childComps/LinChart'
import heatmapChart from '@/views/dashboard/childComps/heatmapChart'
import Barchart from '@/views/dashboard/childComps/Barchart'
import PieChart from '@/views/dashboard/childComps/PieChart'
import WordCloudChart from '@/views/dashboard/childComps/WordCloudChart'
import TagCloudChart from '@/views/dashboard/childComps/TagCloudChart'
import { getVisualizationDataApi } from '@/api/home'

export default {
  name: 'Dashboard',
  components: {
    CardPanel,
    LinChart,
    heatmapChart,
    Barchart,
    PieChart,
    WordCloudChart,
    TagCloudChart

  },
  data() {
    return {
      cardPanelData: {
        visits_count: 0,
        articles_count: 0,
        messages_count: 0,
        comments_count: 0
      },
      week_visits: {
        time_axis: [],
        line_data: []
      },
      articles_commit: {
        data: [],
        end_date: '0000-0-0'
      },
      articles_visit_ranking: {
        articles_name: [],
        visits_count: []
      },
      category_data: [],
      tags_data: [],
      word_cloud: [],
      tags_name: []
    }
  },
  created() {
    getVisualizationDataApi().then(resp => {
      this.cardPanelData = resp.data.number_statis
      this.week_visits = resp.data.week_visits
      this.articles_commit = resp.data.articles_commit
      this.articles_visit_ranking = resp.data.articles_visit_ranking
      this.category_data = resp.data.category_data
      this.tags_data = resp.data.tags_data
      this.word_cloud = resp.data.word_cloud
      this.tags_name = resp.data.tags_name
    })
  },
  computed: {
    ...mapGetters([
      'name'
    ])
  }
}
</script>

<style scoped>

  .custom-margin-bottom {
    margin-bottom: 20px;
  }

</style>
